<template>
  <div id="amap" style="width: 100%; height: 500px; margin-top: -40px"></div>
</template>

<script>
import MapLoader from "../utils/amap";
let AMap;
let map;
export default {
  name: "TestMap",
  methods: {
    createAmap() {
      map = new AMap.Map("amap", {
        resizeEnable: true,
        zoom: 10, // 设置地图显示的缩放级别
        center: [114.174328, 22.316554], // 设置地图中心点坐标
        viewMode: "2D", // 设置地图模式
        // 地图模式
        lang: "zh_cn", // 设置地图语言类型
      });
    //   let scale = new AMap.Scale({
    //     // 比例尺
    //     visible: true,
    //   });
    //   let toolBar = new AMap.ToolBar({
    //     // 工具条
    //     visible: true,
    //   });
    //   map.addControl(scale);
    //   map.addControl(toolBar);
      // 浏览器精确定位
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认：无穷大
          maximumAge: 0, // 定位结果缓存0毫秒，默认：0
          convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true, // 显示定位按钮，默认：true
          buttonPosition: "RB", // 定位按钮停靠位置，默认：'LB'，左下角
          buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
          showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: false, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          let position = result.position;
          if (status === "complete") {
            console.log("定位成功：定位结果 = %o", [
              position.lng,
              position.lat,
            ]);
          } else {
            console.log("定位失败");
          }
        });
      });
    },
  },
  mounted() {
    // 初始化地图对象，加载地图
    MapLoader().then((aMap) => {
      console.log("%地图异步加载成功%");
      AMap = aMap;
      setTimeout(() => {
        // this.request();
        this.createAmap();
      }, 500);
    });
  },
};
</script>

<style>
</style>